<!--
 * @Description: 
 * @version: 
 * @Author: wyx
 * @Date: 2020-09-23 12:36:11
 * @LastEditDate: Do not exit
-->
<template>
  <div>
    <el-container>
      <el-header>
        <div class="left">
          <img src="@/assets/images/logo_zpl.jpg" alt="" />
        </div>
        <div class="right">
          <img src="@/assets/images/login2.jpg" alt="" />
        </div>
      </el-header>
      <el-main>
        <div class="box">
          <div class="box-top">
            <span><i class="el-icon-s-flag"></i>欢迎注册</span>
            <el-divider direction="vertical"></el-divider>
            <span
              ><i class="el-icon-s-opportunity"></i
              >甄漂亮商城欢迎您的加入！</span
            >
            <span class="btr"
              ><el-link @click="toLogin"
                >我已经是其中一员了，现在登录<i
                  class="el-icon-position"
                ></i></el-link
            ></span>
          </div>
          <div class="box-main">
            <el-form
              :model="registerForm"
              :rules="rules"
              ref="ruleForm"
              label-width="120px"
              class="demo-ruleForm"
            >
            <el-form-item label="用户昵称:" prop="nickname">
                <el-input v-model="registerForm.nickname"></el-input>
              </el-form-item>
              <el-form-item label="会员名称:" prop="memberName">
                <el-input v-model="registerForm.memberName"></el-input>
              </el-form-item>
              <el-form-item label="密 码" prop="password">
                <el-input
                  type="password"
                  v-model="registerForm.password"
                  show-password
                ></el-input>
              </el-form-item>
              <el-form-item label="手机号:" prop="phone">
                <el-input v-model="registerForm.phone"></el-input>
              </el-form-item>
              <el-form-item label="邮箱:" prop="email">
                <el-input v-model="registerForm.email"></el-input>
              </el-form-item>
              <el-form-item label="性别:" prop="gender">
                <el-radio v-model="registerForm.gender" label="0">男</el-radio>
                <el-radio v-model="registerForm.gender" label="1">女</el-radio>
              </el-form-item>
              <el-form-item label="出生日期:" prop="birth">
                <el-date-picker
                  v-model="registerForm.birth"
                  type="date"
                  placeholder="选择日期"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="忘记密码问题:" prop="question">
                <el-select v-model="registerForm.question" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="忘记密码答案:" prop="answer">
                <el-input v-model="registerForm.answer"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  class="btn"
                  onmouseover="this.style.backgroundColor='pink';"
                  onmouseout="this.style.backgroundColor='';"
                  @click="toRegister('ruleForm')"
                >
                  立即注册
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-main>
      <el-footer
        >© MAKE-UP ART COSMETICS. ALL WORLDWIDE RIGHTS RESERVED.</el-footer
      >
    </el-container>
  </div>
</template>

<script>
import {register} from "@/api/member.js";
export default {
    data(){
        
        return{
            registerForm:{
                pass: '',
                checkPass: '',
            },
            rules: {
                nickname:[
                    { required: true, message: '请输入用户昵称', trigger: 'blur' },
                    { min: 2, max: 6, message: '长度在2至20个字符', trigger: 'blur' }
                ],
                memberName: [
                    { required: true, message: '请输入会员名称', trigger: 'blur' },
                    { min: 2, max: 6, message: '长度在2至6个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ],
                phone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { min: 11, max: 11, message: '长度在为11个字符', trigger: 'blur' }
                ],
                email: [
                    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                ],
                question: [
                    { required: true, message: '请选择', trigger: 'blur' },
                ],
                answer: [
                    { required: true, message: '请输入答案', trigger: 'blur' },
                ],
            },
            options: [{
                value: '选项1',
                label: '你最喜欢的口红品牌'
                }, {
                value: '选项2',
                label: '你最喜欢的电影'
                }, {
                value: '选项3',
                label: '你最喜欢的动漫'
                }, {
                value: '选项4',
                label: '你的小学名字'
                },],
       }
    },

    methods:{
        toLogin(){
            this.$router.push({path:'/login'});
        },
        toRegister(formName){
            this.$refs[formName].validate((valid)=>{
                if(valid){
                  this.registerForm.headPortrait="/ad/1602155920424"
                    register(this.registerForm).then(res=>{
                        if(res.data.code==="0000"){
                            this.registerForm={}
                            this.$message.success("注册成功，请登录")
                            this.$router.push("/login")
                        }else{
                            this.$message.error("手机号已存在，请更换手机号")
                        }
                    })
                }
            })
        }
    },
}
        
    

</script>

<style scoped>
.el-header,
.el-footer {
  /* background-color: #B3C0D1; */
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-main {
  background-color: #e7d0dabd;
  color: #333;
  text-align: center;
  line-height: 400px;
  display: flex;
}
.left {
  display: flex;
  justify-content: flex-start;
  margin-left: 100px;
}
.right {
  display: flex;
  justify-content: flex-end;
  margin-right: 10px;
  margin-top: -55px;
}
.left img {
  width: 200px;
  height: 60px;
}
.box {
  width: 1000px;
  height: 720px;
  background-color: #fff;
  margin: 30px 300px 70px;
}
.box-top {
  margin-top: -160px;
  margin-left: -50px;
  width: 1000px;
  height: 60px;
}
.btr {
  margin-left: 300px;
  width: 200px;
  height: 60px;
}
.el-link {
  height: 30px;
}
.box-main {
  /* background-color: rgb(168, 165, 165); */
  width: 600px;
  height: 500px;
  margin-top: 170px;
  margin-left: 170px;
}
.btn {
  width: 300px;
  height: 40px;
  margin-left: -100px;
  background-color: rgb(168, 165, 165);
  color: #000;
}
</style>